<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>${_("Seafile Client")}</title>
    <link rel="stylesheet" type="text/css" href="/static/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/ccnet.css?t=2" />
    <link rel="icon" type="image/png" href="/static/img/favicon.png?t=4" />
    <script type="text/javascript" src="/static/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.simplemodal.1.4.1.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-jtemplates.js"></script>
</head>
<%
     from seaserv import ccnet_rpc
     sinfo = ccnet_rpc.get_session_info()
%>

<body>
<div id="wrapper">
    <div id="header">
        <div id="header-inner" class="ovhd">
            <div id="lang-info" class="fright">
                % if settings.SHOW_SYSTEM:
                <a href="/procs/">${_("System")}</a>
                % endif
                <select id="lang-select">
					% if lang == "zh_CN":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=cn"} >中文</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=cn"} >中文</option>
					% endif
					% if lang == "en_US":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=en"} >English</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=en"} >English</option>
					%endif
					% if lang == "fr":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=fr"} >Français</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=fr"} >Français</option>
					% endif
					% if lang == "sk_SK":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=sk_SK"} >Slovak</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=sk_SK"} >Slovak</option>
					% endif
					% if lang == "pt_BR":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=pt_BR"} >Brasilian Portuguese</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=pt_BR"} >Brasilian Portuguese</option>
					% endif
					% if lang == "de_DE":
					<option selected='selected' value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=de_DE"} >Deutsch</option>
					% else:
					<option value=${"/i18n/?prev=" + web_ctx.fullpath + "&ln=de_DE"} >Deutsch</option>
					% endif
                </select>
            </div>
            <div class="fleft">
                <span id="client-note" class="fleft">${_("Seafile Client")}</span>
                <ul id="nav" class="fleft">
                    <li>
                    <a href="/repos/"><span class="icon-folder-close"></span>${_("Libraries")}</a>
                    </li>
                    <li>
                    <a href="/settings/"><span class="icon-cog"></span>${_("Settings")}</a>
                    </li>
                    <li>
                    % if lang == 'zh_CN':
                    <a href=${settings.DEFAULT_HELP_WEB}><span class="icon-question-sign"></span>${_("Help")}</a>
                    % else:
                    <a href=${settings.DEFAULT_HELP_WEB_EN}><span class="icon-question-sign"></span>${_("Help")}</a>
                    % endif
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main-wrapper">
        <div id="main" class="ovhd">
            ${self.main_panel()}
        </div>
        <%def name="main_panel()"></%def>
    </div>
    <div id="footer">
        <p>Copyright © 2013 Seafile Ltd. <span class="version">${_("Version:")} ${seafile_version}</span></p>
    </div>
</div><!-- wrapper -->
<script type="text/javascript" src="/static/js/jquery.tools.min.js"></script>
<%def name="js()"></%def>
${self.js()}
<script type="text/javascript">
//highlight the tr when mouse hover on it
$("table tr:gt(0)").hover(
    function() {
        $(this).addClass('hl');
    },  
    function() {
        $(this).removeClass('hl');
    }   
);
// bind change event to select
$('#lang-select').bind('change', function () {
    var url = $(this).val(); // get selected value
    if (url) { // require a URL
        window.location = url; // redirect
    }
    return false;
});
window.onload = function() {
    // make 'footer' stay in the bottom of the window
    if ($(window).height() > $('body').height()) {
        $('#main-wrapper').css({'height': $(window).height() - $('#header').outerHeight(true) - $('#footer').outerHeight(true)});
    }
};
//font icons: for browsers that don't support ':before'
    var fa_icons = [ 
        {'name':'folder-close', 'con':'f07b'},
        {'name':'cog', 'con':'f013'},
        {'name':'question-sign', 'con':'f059'},
        {'name':'ok', 'con':'f00c'},
        {'name':'refresh', 'con':'f021'},
        {'name':'folder-open-alt', 'con':'f115'},
        {'name':'unlink', 'con':'f127'},
        {'name':'repeat', 'con':'f01e'},
        {'name':'pencil', 'con':'f040'}
    ];
    function setCon(icon, icon_class_prefix, icon_list) {
        for (var i = 0, len = icon_list.length; i < len; i++) {
            if (icon.hasClass(icon_class_prefix + icon_list[i].name)) {
                icon.html('&#x' + icon_list[i].con + ';');
                break;
            }
        }
    }
    var pseudo_support = true;
    var pseudo_test = $('body').append('<span class="icon-ok pseudo-test" style="color:#fff;position:fixed;left:0;bottom:0;"></span>').children('.pseudo-test');
    if (pseudo_test.width() == 0) {
        pseudo_support = false;
        $('[class^="icon-"], [class$=" icon-"]').each(function() {
            setCon($(this), 'icon-', fa_icons);
        }); 
    }
    pseudo_test.remove();
</script>
</body>
</html>
